// src/components/challenge/Rankings.jsx
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { getItem, setItem } from '../../utils/localStorage';

const Rankings = () => {
  const [rankings, setRankings] = useState([]);
  const [filter, setFilter] = useState('weekly'); // weekly, monthly, allTime

  useEffect(() => {
    // Initialize sample rankings if none exist
    const storedRankings = JSON.parse(getItem('rankings') || '[]');
    if (storedRankings.length === 0) {
      const initialRankings = [
        {
          userId: 1,
          username: 'speedmaster',
          bestLapTime: '1:32.456',
          totalRaces: 45,
          points: 12800,
          rank: 1
        },
        {
          userId: 2,
          username: 'racinghero',
          bestLapTime: '1:33.127',
          totalRaces: 38,
          points: 11200,
          rank: 2
        },
        {
          userId: 3,
          username: 'driftking',
          bestLapTime: '1:33.890',
          totalRaces: 42,
          points: 10500,
          rank: 3
        }
      ];
      setItem('rankings', JSON.stringify(initialRankings));
      setRankings(initialRankings);
    } else {
      setRankings(storedRankings);
    }
  }, []);

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-900">排行榜</h1>
        <div className="flex space-x-2">
          {['weekly', 'monthly', 'allTime'].map((option) => (
            <button
              key={option}
              onClick={() => setFilter(option)}
              className={`px-4 py-2 rounded-md ${
                filter === option
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-100 text-gray-600'
              }`}
            >
              {option === 'weekly'
                ? '周榜'
                : option === 'monthly'
                ? '月榜'
                : '总榜'}
            </button>
          ))}
        </div>
      </div>

      <div className="bg-white rounded-lg shadow overflow-hidden">
        <table className="min-w-full">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                排名
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                用户
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                最佳圈速
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                总比赛
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                积分
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {rankings.map((user) => (
              <tr key={user.userId}>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="text-lg font-semibold text-gray-900">
                    #{user.rank}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <Link
                    to={`/user/${user.userId}`}
                    className="text-blue-600 hover:text-blue-800"
                  >
                    {user.username}
                  </Link>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-gray-500">
                  {user.bestLapTime}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-gray-500">
                  {user.totalRaces}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="text-blue-600 font-semibold">
                    {user.points}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Rankings;